import {computed, designComponent, inject, onBeforeUnmount, onMounted, PropType, provide, reactive, watch} from 'plain-design-composition'
import {iVisualData} from 'react-cms-visual-editor/src/packages/utils/types.base'
import {createCmsPreview} from "react-cms-visual-editor";
import 'react-cms-visual-editor/src/libs/icon/iconfont.css'
import {createReactivityApi} from "react-cms-visual-editor/src/packages/utils/createReactivityApi";
import {processActionRender} from "./processActionRender";

// export const CmsPreviewApp = 'CmsPreviewApp'
export const CmsPreviewApp = designComponent({
    props: {
        data: {type: Object as PropType<iVisualData>}
    },
    setup({props}) {
        const reactivityApi = createReactivityApi({reactive, computed, type: 'react', designComponent, onMounted, onBeforeUnmount, watch, provide, inject})
        const CmsPreview = createCmsPreview({api: reactivityApi, processActionRender})

        return () => (
            !!props.data && <>
                <CmsPreview data={props.data}/>
            </>
        )
    },
})
